<template>
  <div>
    <div v-show="toShowRemarkDetails" style="padding: 10px 20px">
      <!-- 操作区域 -->
      <div style="margin-bottom: 10px">
        <el-button @click="addFunc">新增</el-button>
        <el-button @click="editFunc">编辑</el-button>
        <el-button @click="viewFunc">查看</el-button>
        <el-button @click="delFunc">删除</el-button>
        <el-button @click="closeFunc">关闭</el-button>
      </div>
      <!-- 搜索区 -->
      <el-table
       @row-click="rowClick"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        max-height="150px"
        size="mini"
      >
        <el-table-column
          width="55"
          type="selection"
          
        ></el-table-column>
        <el-table-column
          v-for="(item, key) in textData"
          :key="key"
          :show-overflow-tooltip="true"
          :prop="item.prop"
          :label="item.label"
          :render-header="item.render"
          :sortable="item.sortable"
          :formatter="item.formatter"
          :width="item.width"
          :min-width="item.minwidth"
        ></el-table-column>
      </el-table>
      <pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.page"
        @refresh="searchFunc"
        :page-size="searchForm.size"
        :total="total"
      ></pagination>
    </div>
    <el-dialog
      v-dialogDrag
      :title="saveTitles[saveFlg - 1]"
      :visible.sync="addOrEdit"
      width="30%"
      append-to-body
    >
      <el-form
        :model="saveForm"
        ref="saveForm"
        label-width="100px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="24" v-if="saveFlg == '3'">
            <el-form-item label="操作人：">
              <el-input v-model="saveForm.modifier" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新时间：" v-if="saveFlg == '3'">
              <el-input
                readonly
                v-model="saveForm.modifiedTm"
                maxlength="40"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注内容：" prop="descn">
              <el-input v-model="saveForm.descn" type="textarea" :readonly="saveFlg == '3'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveFunc" v-if="saveFlg != '3'">确 定</el-button>
        <el-button @click="cancelFunc">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { ruleDefinition } from "@/api/index";
export default {
  props: {
    toShowRemarkDetails: {
      type: Boolean,
      default: true,
    },
    ruleCode: {
      type: String,
      default: "",
    },
    blockType: {
      type: String,
      default: "ruleBase",
    },
  },
  components: {},
  data() {
    return {
      saveFormRules: {
        descn: [
          {
            required: true,
            message: "请输入备注内容",
            trigger: "blur",
          },
        ],
      },
      searchForm: {
        page: 1,
        size: 15,
      },
      saveFlg: "",
      total: 200,
      saveForm: {
        upDate: moment(new Date()).format("YYYY-MM-DD: HH:mm:ss"),
        descn: "",
        blockType: this.blockType,
      },
      addOrEdit: false, // 新增/编辑/查看弹窗
      saveTitles: ["新增", "编辑", "查看"],
      checkList: [],
      // 完整表头字段&&列属性配置
      textData: [
        // {
        //   prop: "noteId",
        //   label: "编码",
        //   sortable: true,
        //   align: "center",
        //   checkDisabled: true,
        // },
        {
          prop: "descn",
          label: "备注内容",
          checkDisabled: true,
        },

        {
          prop: "creator",
          label: "创建人",
          checkDisabled: false,
          formatter: (row) => {
            if (row.creator) {
              return row.creator
            } else{
              return '-'
            }
          },
        },
        {
          prop: "createdTm",
          label: "创建时间",
          sortable: true,
          checkDisabled: false,
          formatter: (row) => {
            if (row.createdTm) {
              return moment(row.createdTm).format("YYYY-MM-DD HH:mm:ss");
            } else{
              return '-'
            }
          },
        },
        {
          prop: "modifier",
          label: "修改人",
          checkDisabled: false,
          formatter: (row) => {
            if (row.modifier) {
              return row.modifier
            } else{
              return '-'
            }
          },
        },
        {
          prop: "modifiedTm",
          label: "修改时间",
          sortable: true,
          checkDisabled: false,
          formatter: (row) => {
            if (row.modifiedTm) {
              return moment(row.modifiedTm).format("YYYY-MM-DD HH:mm:ss");
            } else{
              return '-'
            }
          },
        },
      ],
      // 获取table的数据
      tableData: [
      ],
    };
  },
  mounted() {
    this.searchFunc();
  },
  methods: {
    // 点击表格行事件
    rowClick(row){
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    // 关闭
    closeFunc() {
      if(this.blockType == "ruleBase"){
      this.$parent.toShowRemark();
      }
        if(this.blockType == "ruleDriver"){
      this.$parent.$parent.toShowRemark();
      }
    },
    searchFunc() {
      let params = {
        page: this.searchForm.page,
        size: this.searchForm.size,
        relatedRecordId: this.ruleCode,
        blockType: this.blockType
      };

      ruleDefinition
        .pubNoteQuery(params)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          } else{
            this.$message.error(res.message);
          }
        })
        .catch((err) => {});
    },

    handleClose() {
      // 关闭事件
    },
    // 新增
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
      this.saveForm.upDate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      this.addOrEdit = true;
    },
    // 编辑
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    // 查看
    viewFunc() {
      this.saveFlg = 3;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行查看");
      }
      let row = selection[0];
      let form = { ...row };
      this.saveForm = form;
      this.addOrEdit = true;
    },
    saveFunc() {
      if(this.saveFlg == '3'){
         this.addOrEdit = false;
         this.searchFunc();
         return
      }
      this.$refs["saveForm"].validate((valid) => {
        if (valid) {
          let data = {
            descn: this.saveForm.descn,
            relatedRecordId: this.ruleCode,
            blockType: this.blockType,
            noteId: this.saveForm.noteId 
          };
          ruleDefinition
            .pubNoteSave(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.addOrEdit = false;
                this.searchFunc();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {});
        }
      });
    },
    // 删除
    delFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("您确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = { ids: selection.map((v) => v.noteId) };
          ruleDefinition
            .pubNoteRemove(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
                this.searchFunc();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.size = val;
      this.searchFunc();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      console.log(`当前页: ${val}`);
      this.searchFunc();
    },
    cancelFunc() {
      this.addOrEdit = false;
      this.$refs.saveForm.clearValidate();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>